<template>
	<tm-fullView>
		<tm-menubars  title="下拉选项" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="fixed fulled" style="z-index: 30;">
			<tm-dropDownMenu :unColor="!$tm.vx.state().tmVuetify.black?'black':'whtie'" @confirm="confirm" :list="list2"></tm-dropDownMenu>
		</view>
		<view style="height: 800upx;"></view>
		<tm-sheet color="grey" classname=" text-size-n " :shadow="24" >
			下面的demo中，排序中，的第一个多选被禁用，第二个单选中的第一项被禁用，以此来展现优秀的控制任意选项的禁用功能。
		</tm-sheet>
		
		<tm-sheet :shadow="24" :padding="[0,0]" >
			
			<tm-dropDownMenu  :default-selected="selected" @confirm="confirm" unColor="whtie" activeColor="yellow" bg-color="bg-gradient-red-accent-b" color="red" :list="list"></tm-dropDownMenu>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmDropDownMenu from "@/tm-vuetify/components/tm-dropDownMenu/tm-dropDownMenu.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmDropDownMenu},
		data() {
			return {
				selected:[ '1-2','1-4','2-4'],
				list2: [{
						title: '排序',
						children: [{
								title: "默认排序",
								model: "checkbox",
								name:"desc",
								children: [{
										title: "默认排序",
										id: '1-1'
									},
									{
										title: "最近更新",
										id: '1-2'
									},
									{
										title: "信誉值最高",
										id: '1-3'
									},
									{
										title: "信誉值最高",
										id: '1-4'
									}
								]
							},
							{
								title: "价格选择",
								model: "radio",
								name:"priceselected",
								children: [{
										title: "默认排序",
										
										id: '2-1'
									},
									{
										title: "最近更新",
										id: '2-2'
									},
									{
										title: "信誉值最高",
										id: '2-3'
									},
									{
										title: "最近更新",
										id: '2-4'
									},
									{
										title: "信誉值最高",
										id: '2-5'
									}
								]
							}
						]
					}, {
						title: '价格',
						children: [{
							title: "价格排序",
							name:"priceDesc",
							model: "radio",
							children: [{
									title: "默认排序",
									id: '3-1'
								},
								{
									title: "最近更新",
									id: '3-2'
								},
								{
									title: "信誉值最高",
									id: '3-3'
								}
							]
						}]
					},
					{
						title: '品牌',
						children: [{
								title: '自定品牌',
								model: "input",
								name:"baner",
								type: "number",
								value: ""
							},
							{
								title: '自定价格',
								name:"customPrice",
								model: "slider",
								suffix: '元',
								max: 1000,
								value: 0
							},
							{
								title: "品牌排序",
								model: "checkbox",
								name:"banerDesc",
								children: [{
										title: "默认排序",
										id: '4-1'
									},
									{
										title: "最近更新",
										id: '4-2'
									},
									{
										title: "信誉值最高",
										id: '4-3'
									}
								]
							}
						]
					}
				],
				list: [{
						title: '排序',
						children: [{
								title: "默认排序",
								model: "checkbox",
								name:"defaultDesc",
								disabled: true,
								children: [{
										title: "默认排序",
										id: '1-1'
									},
									{
										title: "最近更新",
										id: '1-2'
									},
									{
										title: "信誉值最高",
										id: '1-3'
									},
									{
										title: "信誉值最高",
										id: '1-4'
									}
								]
							},
							{
								title: "价格选择",
								name:"priceDesc2",
								model: "radio",
								children: [{
										title: "默认排序",
										disabled:true,
										id: '2-1'
									},
									{
										title: "最近更新",
										id: '2-2'
									},
									{
										title: "信誉值最高",
										id: '2-3'
									},
									{
										title: "最近更新",
										id: '2-4'
									},
									{
										title: "信誉值最高",
										id: '2-5'
									}
								]
							}
						]
					}, {
						title: '价格',
						children: [{
							title: "价格排序",
							name:"priceDesc3",
							model: "radio",
							children: [{
									title: "默认排序",
									id: '3-1'
								},
								{
									title: "最近更新",
									id: '3-2'
								},
								{
									title: "信誉值最高",
									id: '3-3'
								}
							]
						}]
					},{
						title: '单选',
						children: [{
							title: "不想要标题，可不填写就不显示",
							model: "list",
							name:"list",
							children: [{
									title: "默认排序",
									id: '3-1'
								},
								{
									title: "最近更新",
									id: '3-2'
								},
								{
									title: "信誉值最高",
									id: '3-3',
									disabled:true
								}
							]
						}]
					},
					{
						title: '多选',
						children: [{
							title: "不想要标题，可不填写就不显示",
							model: "listCheckbox",
							name:"listCheckbox",
							children: [{
									title: "默认排序",
									id: '3-1',
									disabled:true
								},
								{
									title: "最近更新",
									id: '3-2'
								},
								{
									title: "信誉值最高",
									id: '3-3'
								}
							]
						}]
					},
					{
						title: '品牌',
						children: [{
								title: '自定品牌',
								model: "input",
								name:"customBaner",
								type: "number",
								value: ""
							},
							{
								title: '自定价格',
								model: "slider",
								name:"customPrice",
								suffix: '元',
								max: 1000,
								value: 0
							},
							{
								title: "品牌排序",
								model: "checkbox",
								name:"banerDesc2",
								children: [{
										title: "默认排序",
										id: '4-1'
									},
									{
										title: "最近更新",
										id: '4-2'
									},
									{
										title: "信誉值最高",
										id: '4-3'
									}
								]
							},
							{
								title: "级联选择器",
								model: "pickers",
								name:"pickers2",
								value:[],
								placeholder:"请下拉选择",
								data:[
									{
										title: '水果产品',
										id: 1,
										children: [{ title: '苹果' }, { title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
									},
									{
										title: '房间类型',
										id: 2,
										children: [{ title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
									},
									{
										title: '批发市场',
										id: 3,
										children: [{ title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
									}
								]
							},
							{
								title: "时间选择器",
								model: "pickersDate",
								name:"pickers3",
								value:"",
								placeholder:"请选择日期",
							}
						]
					}
				]
			}
		},
		methods: {
			confirm(e){
				console.log('您选中了的数据为：',e);
			}
		}
	}
</script>

<style>

</style>
